<template>
    <div>
        <div class="title">
            <el-row type="flex" class="row-bg" justify="space-around">

                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        合同号：3010-230-1
                    </div>
                </el-col>

                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        设备型号：123910
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content bg-purple-light"></div>
                </el-col>
            </el-row>
        </div>
        <el-row type="flex" class="row-bg" justify="space-around">
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    设备码：3010-3-02
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    客户：上海XXXXX医院
                </div>
            </el-col>

            <el-col :span="12">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
        </el-row>
        <div class="date">
            <el-row type="flex" class="row-bg" justify="space-around">

                <el-col :span="8">
                    任务类型：
                    <el-select v-model="value" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>

                <el-col :span="6">
                    周期：
                    <el-select v-model="value" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="6">
                    <span class="demonstration">截止日期：</span>
                    <el-date-picker type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-col>
            </el-row>

            <div class="personnel">
                <p>分配人员</p>
                <div class="line" v-for="(item,index) in Peoplelist" :key="item.id">
                    <div class="rad" v-on:click="delUser(index)">
                        <img v-if="item.avatar" v-bind:src='item.avatar' />
                        <span class="userName" v-else>{{item.name.substr(item.name.length-2)}}</span>
                    </div>
                    <span>{{item.name}}</span>
                </div>
                <img class="add" src="./../../../static/img/添加.png" alt="" v-on:click="choose">
            </div>
            <el-row :gutter="20">
                <el-col :span="12" :offset="10">
                    <div class="grid-content bg-purple">
                        <div class="update">
                            <p>保存</p>
                        </div>
                    </div>
                </el-col>
            </el-row>

        </div>
    </div>
</template>
<script>
export default {
    name: "component_name",
    data() {
        return {
            cc: []
        };
    },
    methods: {
        choose: function() {
            console.log(111)
            this.$ddapi.contactChoose([]).then(data => {
                console.log(corp.cc_list)
                data.map(item => {
                    // this.$set(corp.cc_list, { name: item.name, userId: item.emplId })
                    this.cc.push({ name: item.name, userId: item.emplId })
                    //    corp.cc_list.push({ name: item.name, userId: item.emplId })
                })

            })
        },
    },
}
</script>
<style lang="css" scoped>
.title {
    margin: 2rem 0;
}

.date {
    margin: 2rem 0;
}

.block {
    margin: 2rem 2.5rem;
}

.add {
    width: 2rem;
}

.personnel {
    margin: 3rem 2rem;
    display: -webkit-box;
}

.personnel p {
    line-height: 2rem;
    margin-right: 1rem;
}

.update {
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    background: #30a5ff;
    width: 50%;
    color: #fff;
    border-radius: 7px;
    margin-top: 4rem;
}
</style>